<template>
  <OverView
    class="user-base"
    is-vertical
    titleSize="lg"
    :gap="false"
    bg="transparent"
    centered
    :thumb-ratio="false"
    @click="onLogin"
  >
    <template #thumb>
      <VanImage
        v-if="info.avatar"
        class="user-base__avatar"
        :src="info.avatar"
        round
      ></VanImage>
    </template>
    <template #title>
      <BaseSpace size="0">
        <BaseTitle gap="0">{{ info.name }}</BaseTitle>
        <!--  <BaseText v-if="isLogined" is-icon :name="vipIcon"></BaseText> -->
      </BaseSpace>
    </template>
    <!--  <BaseText size="sm" color="mute">{{ info.desc }}</BaseText> -->
  </OverView>
</template>

<script setup>
import { computed } from "vue";
import avatarIcon from "@/assets/home/user/avatar.png";
import vipIcon from "@/assets/icon/vip.svg";
import { useRouter } from "vue-router";
import { maskString } from "@/utils/stringUtils.js";
import { useLoginStore } from "@/stores/auth.js";

const { getUserInfo, getIsLogined } = useLoginStore();
const isLogined = getIsLogined({
  isSilent: true,
});

const userInfo = getUserInfo({
  isSilent: true,
});

const router = useRouter();

let info = computed(() => {
  if (!isLogined.value) {
    return {
      name: "未登录",
      desc: "点击登录抢购商品",
      avatar: avatarIcon,
    };
  } else {
    let code = userInfo.value.distingCode || "";
    return {
      name: userInfo.value.nickName || userInfo.value.realName,
      desc: maskString(code),
      avatar: userInfo.value.avatar || avatarIcon,
    };
  }
});

const onLogin = () => {
  if (!isLogined.value) {
    router.push({
      name: "login",
    });
  }
};
</script>

<style lang="scss" scoped>
.user-base {
  --goods-item-gap: 0;
  align-items: center;
  padding: var(--dx-gap-xl) 0;

  :deep(.over-view__thumb) {
    height: 100px;
    width: 100px;
  }

  &__avatar {
    height: 100%;
    width: 100%;
    padding: 5px;
  }
}
</style>
